<template>
  <el-dialog title="设置" :visible.sync="dialogVisible" width="320px" top="10vh" :modal="false" @close="handleClose">
    <!-- 确保关闭事件被正确处理 -->
    <div class="settings-content">
      <div class="setting-item">
        <h4>每图成本</h4>
        <div class="cost-control">
          <el-input v-model="localCost" placeholder="0" size="small" style="width: 100px; margin-right: 10px;"
            @change="emitCostUpdate">
          </el-input>
          <img :src="require('@/../public/assets/huo.png')" alt="火" class="cost-icon">
          <el-checkbox v-model="localCount" @change="emitCountUpdate" style="margin-left: 15px;">
            计入收益
          </el-checkbox>
        </div>
      </div>

      <div class="setting-item">
        <h4>窗口透明度</h4>
        <div class="opacity-control">
          <div class="slider-container">
            <el-slider v-model="localOpacity" :min="30" :max="100" :step="1" show-stops :show-tooltip="false"
              @input="emitOpacityUpdate">
            </el-slider>
            <div class="opacity-value">{{ localOpacity }}%</div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: Boolean,       // 仅接收父组件的显示状态
    costPerMap: [Number, String],
    countIncome: Boolean,
    opacity: Number
  },
  data() {
    return {
      // 本地状态，用于组件内部双向绑定
      localCost: this.costPerMap,
      localCount: this.countIncome,
      localOpacity: this.opacity,
      // 新增：本地维护弹窗显示状态
      dialogVisible: this.visible
    }
  },
  watch: {
    // 监听父组件传来的 visible 变化，同步到本地
    visible(newVal) {
      this.dialogVisible = newVal;
    },
    // 监听本地弹窗状态变化，同步到父组件
    dialogVisible(newVal) {
      this.$emit('update:visible', newVal);
    },
    costPerMap(newVal) {
      this.localCost = newVal
    },
    countIncome(newVal) {
      this.localCount = newVal
    },
    opacity(newVal) {
      this.localOpacity = newVal
    }
  },
  methods: {
    // 处理关闭事件（确保所有关闭途径都能触发）
    handleClose() {
      this.dialogVisible = false;
      this.$emit('update:visible', false);
    },
    // 向父组件传递成本更新
    emitCostUpdate() {
      this.$emit('update-cost', this.localCost)
    },
    // 向父组件传递收益计算开关更新
    emitCountUpdate() {
      this.$emit('update-count', this.localCount)
    },
    // 向父组件传递透明度更新
    emitOpacityUpdate() {
      this.$emit('update-opacity', this.localOpacity)
    }
  }
}
</script>

<style scoped>
/* 样式保持不变 */
.settings-content {
  padding: 5px 0;
  max-height: 300px;
  overflow: hidden;
}

.setting-item {
  margin-bottom: 20px;
  padding: 0 5px;
}

.setting-item h4 {
  margin-bottom: 10px;
  color: #333;
  font-size: 13px;
  font-weight: 600;
}

.cost-control {
  display: flex;
  align-items: center;
  gap: 5px;
}

.cost-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.opacity-control {
  width: 100%;
}

.slider-container {
  width: 100%;
  padding: 0 10px;
  position: relative;
}

.opacity-value {
  text-align: center;
  font-size: 12px;
  color: #666;
  margin-top: 8px;
  font-weight: 500;
}
</style>